
// const Config = require('webpack-chain');

// // Instantiate the configuration with a new API
// const config = new Config();
//Vue 骨架屏
// const HtmlWebpackPlugin = require('html-webpack-plugin')
// const SkeletonPlugin  = require('page-skeleton-webpack-plugin').SkeletonPlugin
const path = require('path')
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
module.exports = {

    lintOnSave: false,
    // configureWebpack: {
    //     plugins: [
    //       new HtmlWebpackPlugin({
    //         filename: 'index.html',
    //         template: 'public/index.html'
    //       }),
    //       new SkeletonPlugin({
    //         pathname: path.resolve(__dirname, `./shell`), // 用来存储 shell 文件的地址
    //         staticDir: path.resolve(__dirname, './dist'), // 最好和 `output.path` 相同
    //         routes: ['/', '/about'] // 将需要生成骨架屏的路由添加到数组中
    //       })
    //     ]
    //   }

    // configureWebpack: config => {
    //     // vue骨架屏插件配置
    //     config.plugins.push(
    //       new SkeletonWebpackPlugin({
    //         webpackConfig: {
    //           entry: {
    //             app: path.join(__dirname, './src/skeleton/skeleton.js')
    //           }
    //         },
    //         minimize: true,
    //         quiet: true
    //       })
    //     )
    //   },
    configureWebpack: (config) => {
        config.plugins.push(new SkeletonWebpackPlugin({
            webpackConfig: {
                entry: {
                    app: path.join(__dirname, './src/skeleton/skeleton.js')
                }
            },
            // SPA 下是压缩注入 HTML 的 JS 代码
            minimize: true,
            // 服务端渲染时是否需要输出信息到控制台
            quiet: true,
            // 根据路由显示骨架屏
            router: {
                mode: 'hash',
                routes: [
                    {
                        path: '/index',
                        skeletonId: 'skeleton-message'
                    },
                    {
                        path: '/bar',
                        skeletonId: 'skeleton-message'
                    }
                ]
            }
        }))
    },
    css: {
        // 使用 css 分离插件 mini-css-extract-plugin，不然骨架屏组件里的 <style> 不起作用，
        extract: true,
    }
}
